<template>
  <view class="login-container">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="loginName"
            name="loginName"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </view>
</template>

<script>
import api from '../../api/index'
import auth from '../../util/auth';
import {showToast} from 'vant';
import { ref, onMounted} from 'vue';
export default {
  setup() {
    const loginName = ref('');
    const password = ref('');

    onMounted(() => {
      onLoad();
    });
    const onLoad = () => {
		  // auth.clearAuthInfo()
      if (auth.getLoginStatus()) {
        console.log('已登录：',uni.getStorageSync('phone'))
        uni.redirectTo({
          url: '/pages/index/index'
        });
      }
    };

    // 登录
    const onSubmit = (values) => {
      api.validUser(values).then(res => {
        if (res.code == 200) {
          if (res.data === null || res.data.success === false) {
            showToast("账号或者密码错误！")
          }
          if (res.data.success) {
            auth.setLoginStatus(true);
            auth.setPhone(values.loginName);
            showToast("登录成功");
            setTimeout(() => {
              uni.redirectTo({
                url: '/pages/index/index'
              });
            }, 1000);
          }
        }
      })
    };

    return {
      loginName,
      password,
      onSubmit,
    };
  },
};
</script>

<style>
page {
  background: linear-gradient(135deg, #74ebd5, #ACB6E5); /* 渐变背景色 */
}

.login-container {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -30%);
  width: 90%;
  max-width: 400px;
  padding: 24px;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  backdrop-filter: blur(8px); /* 毛玻璃效果（可选） */
  font-family: 'Segoe UI', sans-serif;
}
</style>